<ion-view hide-nav-bar="true">
    <style>
        .card-top{height: 300px;overflow: hidden}
        .integrity{background: #ff516a; color:white; height: 25px; width: 80px;  border: none; border-radius: 3px; font-size: 8px; line-height: 20px; margin-right: 40px}
        .card-bottom span{color: #ff516a; padding: 0 8px}
        .card-bottom i{font-size: 15px; color: #a4a4a4  }
        .card-bottom{height: 70px; padding: 10px 20px; position: relative;}
        .myHeader{position: absolute; background: url("images/header_me.jpg"); border: 1px white solid; height: 90px; width: 90px; border-radius: 45px; top: -60px; z-index: 100}
        .card-bottom p{color: #bababa; font-size: 10px; margin-left: 100px; }
    </style>
    <ion-content style="background: #ffffc6">
        <div class="card">
            <div class="card-top">
                <img src="images/myself.jpg" width="100%">
            </div>
            <div class="card-bottom">
                <div class="myHeader"></div>
                <p>能坐着绝对不站着，能躺着绝对不坐着</p>
                <button class="integrity">捡节操</button>
                <i>关注</i><span>2</span>
                <i>粉丝</i><span>9</span>
            </div>
        </div>
        <div class="list" style="margin-top: 10px">
            <a class="item item-icon-left item-icon-right" ng-click="openModal()">
                <i class="icon ion-ios-paperplane positive"></i>
                小纸条
                <i class="icon ion-ios-arrow-right dark"></i>
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="openModal()">
                <i class="icon ion-social-twitch-outline calm"></i>
                我的消息
                <i class="icon ion-ios-arrow-right dark"></i>
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="openModal()">
                <i class="icon ion-social-snapchat-outline balanced"></i>
                添加好友
                <i class="icon ion-ios-arrow-right dark"></i>
            </a>
        </div>
        <div class="list" style="margin-top: 10px">
            <a class="item item-icon-left item-icon-right" ng-click="openModal()">
                <i class="icon ion-android-favorite assertive"></i>
                我的收藏
                <i class="icon ion-ios-arrow-right dark"></i>
            </a>
            <a class="item item-icon-left item-icon-right" ng-click="openModal()">
                <i class="icon ion-social-python royal"></i>
                设置
                <i class="icon ion-ios-arrow-right dark"></i>
            </a>
        </div>
    </ion-content>
    <script id="my-modal.html" type="text/ng-template">
        <!--需要将modal的内容放在一个ionModalView>元素内-->
        <ion-modal-view>
            <style>
                .lazy{background: url("images/lang.jpg"); background-size: cover;}
            </style>
            <ion-header-bar class="bar-dark">
                <button class="button button-clear" ng-click="closeModal()">返回</button>
                <h1 class="title">我</h1>
            </ion-header-bar>
            <ion-content class="lazy">
            </ion-content>
        </ion-modal-view>
    </script>
</ion-view>